<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>分享</title>
    <style>
        input {
            outline: none;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        .head {
            background-image: url('./../image/sharebg.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: 0 0;
            height: 2rem;
            padding: .25rem .34rem;
        }
        
        .head .tou {
            display: flex;
            display: -webkit-flex;
            font-size: .16rem;
            color: #fff;
            align-items: center;
            -webkit-align-items: center;
            margin-bottom: .15rem;
        }
        
        .touxiang {
            width: .45rem;
            height: .45rem;
            border-radius: 50%;
        }
        
        .solgiun {
            font-size: .16rem;
            color: #fff;
        }
        
        .login-box .box {
            /* display: flex;
            display: -webkit-flex; */
            height: .5rem;
            line-height: .5rem;
            border-bottom: 1px solid #aaa;
            margin-left: .15rem;
            font-size: .14rem;
            color: #333;
            /* align-items: center;
            -webkit-align-items: center; */
        }
        
        .login-box .box input {
            border: none;
            padding-left: .4rem;
            line-height: 2;
            width: 2rem;
        }
        
        .login-box .box .code {
            width: .99rem;
            height: .25rem;
            background-color: #f7f7f7;
            color: #999;
            text-align: center;
            line-height: .25rem;
            border-radius: .13rem;
            display: inline-block;
        }
        
        .btn {
            /* position: fixed; */
            /* left: .15rem;
            right: .15rem;
            bottom: .4rem; */
            font-size: .15rem;
            border-radius: .23rem;
            text-align: center;
            line-height: .45rem;
            color: #fff;
            font-size: .16rem;
            background: rgba(245, 61, 77, 1);
            margin: 1.5rem .15rem 0;
        }
        
        .tip_alert,
        .loading {
            position: fixed;
            left: 0;
            right: 0;
            top: 80%;
            z-index: 9999;
            margin-top: -20px;
            text-align: center;
        }
        
        .login-box label {
            /* padding-right: .4rem; */
        }
        
        .mainBox .loading {
            left: 280px;
            padding-top: 131px;
        }
        
        .tip_alert div,
        .loading div {
            display: inline-block;
            padding: .05rem .1rem;
            color: red;
            background-color: #ddd;
            border-radius: 10px;
            font-size: .16rem;
        }
    </style>
</head>

<body>
    <div class="login" id="app">
        <div class="head">
            <div class="tou">
                <img src="../../image/logo.png" alt="" class="touxiang">新阳教育
            </div>
            <p class="solgiun">我邀请你加入新阳教育，和我一起天天向上</p>
        </div>
        <div class="login-box">
            <div class="zhanghao box">
                <label>手机号</label>
                <!-- <span>+86<img src="../image/xiaoright.png" alt=""> </span> -->
                <input type="number" placeholder="请输入您的账号" v-model="mobile">
            </div>
            <div class="pass box">
                <label>验证码</label>
                <input type="number" placeholder="请输入验证码" class="code_input" v-model="code">
                <span class="code" @click="fnGetCode" v-if="codeFlag">获取验证码</span>
                <span class="code_act" v-else>重新获取{{num}}s</span>
            </div>

            <div class="pass box">
                <label>邀请人</label>
                <input type="number" placeholder="请输入邀请人手机号" v-model="password">
            </div>
            <div class="btn ssss" @click="fnRegister">立即注册</div>
        </div>
        <div class="tip_alert" v-if="alertFlag">
            <div>{{text}}</div>
        </div>
    </div>
</body>
<script src="./../js/rem.js"></script>
<script src="../libs/thirdpart/vue.js"></script>
<script src="../js/axios.js"></script>
<script src="../js/base.js"></script>
<script>
    var token = sessionStorage.token;
    var AUTH_TOKEN = 'Bearer ' + token;
    var vm;
    axios.defaults.baseURL = baseURL;
    axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

    fnVueInit()

    function fnVueInit() {
        vm = new Vue({
            el: '#app',
            data: {
                codeFlag: true,
                num: 60,
                passFlag: true,
                password: '',
                type: 'password',
                mobile: '',
                code: '',
                tel: '',
                icon_pass: '../../image/icon_pass.png',
                icon_pass_act: '../../image/icon_pass_act.png',
                yinsi: '../../image/y_select.png',
                yinsiFlag: true,
                nickname: '',
                alertFlag: false
            },
            methods: {
                fnGetCode: function() {
                    var _this = this;
                    if (!this.isPhoneNum(_this.mobile)) {
                        //@param    提示文本
                        this.ToastOpen('请输入正确的手机号')
                        return
                    }
                    this.codeFlag = false;
                    var timer = setInterval(function() {
                        if (_this.num > 0) {
                            _this.num--;
                        } else {
                            clearInterval(timer);
                            _this.codeFlag = true;
                            _this.num = 60;
                        }
                    }, 1000);

                    axios.get('/api/sms/code?mobile=' + _this.mobile + '&type=register')
                        .then((response) => {
                            console.log(response)
                            if (response.data.code == 10200) {
                                this.ToastOpen(response.data.msg)
                            } else {
                                this.ToastOpen('response.data.msg')
                            }
                        })
                        .catch(function(error) {
                            console.log(error);
                        });
                },
                isPhoneNum: function(params) {
                    return /^1[123456789]\d{9}$/.test(params)
                },
                fnRegister: function() {
                    //@param apiName接口名称
                    //@param method 接口协议 
                    //@param apiParam       接口参数
                    var _this = this;
                    if (!this.isPhoneNum(this.mobile)) {
                        //@param    提示文本
                        this.ToastOpen('请输入正确的手机号');
                        return
                    }
                    if (!this.code) {
                        //@param    提示文本
                        this.ToastOpen('验证码不能为空');
                        return
                    }

                    if (!this.isPasswd(this.password)) {
                        //@param    提示文本
                        this.ToastOpen('密码为至少6以上的数字加字母');
                        return
                    }
                    var apiParam = {
                        mobile: this.mobile,
                        code: this.code,
                        type: 'register',
                        client: 'teacher'
                    }
                    axios.post('/api/auth/register', apiParam)
                        .then((response) => {
                            console.log(response)
                            if (response.data.code == 10200) {
                                this.ToastOpen(response.data.msg);
                                setTimeout(() => {
                                    window.location.href = './share_success.html'
                                }, 2000);
                            } else {
                                this.ToastOpen(response.data.msg)
                            }
                        })
                        .catch(function(error) {
                            console.log(error);
                        });

                },
                fnSubmit: function() {
                    //@param手机号文本
                    var tel = app.isPhoneNum(this.telnum);
                    if (tel) {

                    }

                },
                fnOpenShareSucceed: function() {

                },
                ToastOpen(text) {
                    this.alertFlag = !this.alertFlag;
                    this.text = text;
                    setTimeout(() => {
                        this.alertFlag = !this.alertFlag;
                    }, 2000)
                },
            }
        })
    }
</script>

</html>